import { WindowComp, WindowSideMenu } from "@/components"
import { getAllWebsiteTypesApi, getAllWebsitesByTypeIdApi } from "@/services"
import { useLocale } from "@/utils/hooks"
import { getClassNames, Icon } from "magic-ui-react"
import { useState } from "react"
import { TransitionGroup, CSSTransition } from "react-transition-group"
import styles from './style.module.less'
import WebsiteInfoCard from "./WebsiteInfoCard"
import './styles.less'

const AddWebsite = () => {
  const locale = useLocale()
  const [options, setOptions] = useState<any[]>([])
  const [websiteList, setWebsiteList] = useState<any[]>([])

  const getOptions = async () => {
    try {
      let res = await getAllWebsiteTypesApi()

      const newOptions = [
        {
          label: '全部',
          value: undefined
        },
        ...res.data.map((item: any) => {
          return {
            label: item.name,
            value: item._id
          }
        })
      ]

      setOptions(newOptions)
    } catch (error: any) {
      console.log(error);
    }
  }

  const getWebsiteList = async (id: string) => {
    try {
      let res = await getAllWebsitesByTypeIdApi(id)
      setWebsiteList(res.data)
    } catch (error) {

    }
  }

  const content = (
    <div className={styles.systemSettingComp}>
      <WindowSideMenu
        options={options}
        onChange={(active: any) => {
          getWebsiteList(active)
        }}
      />
      <div className={styles.addWebsiteContent}>
        <TransitionGroup exit={false} className={styles.websiteList}>
          {websiteList.map((website, index) => (
            <CSSTransition
              key={website._id}
              timeout={200}
              classNames="item"
              style={{
                transitionDelay: `${index * 100}ms`
              }}
            >
              <WebsiteInfoCard websiteInfo={website} />
            </CSSTransition>
          ))}
        </TransitionGroup>
      </div>

    </div>
  )

  return (
    <WindowComp
      title={`${locale(['global.add', 'global.website'])}`}
      icon={(open) => {
        return (
          <Icon
            className={getClassNames([
              'align-middle',
              {
                'text-yellow-500': open
              }
            ])}
            size={26}
            icon={'earth-americas'}
          />
        )
      }

      }
      firstRender={() => {
        getOptions()
      }}
      content={() => content}
    />
  )
}

export default AddWebsite